<template>
    <div class="default-main ba-table-box">
        <!-- <div style="margin-bottom: 20px;">
            <el-row :gutter="12">
                <el-col :span="6">
                    <el-card shadow="hover">
                        <div class="content">
                            <div class="content-left">
                                <div style="width: 48px;height: 48px;color: #fff;">
                                    <Icon class="ba-upload-icon" name="el-icon-Briefcase" size="50" color="#4c7dfe" />
                                </div>
                            </div>
                            <div>
                                <span class="content-right-text">{{ SummaryData.user_count }}</span>
                                <span class="content-right-desc">普通用户总数</span>
                            </div>
                        </div>

                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover">
                        <div class="content">
                            <div class="content-left">
                                <div style="width: 48px;height: 48px;color: #fff;">
                                    <Icon class="ba-upload-icon" name="el-icon-Briefcase" size="50" color="#ffab2c" />
                                </div>
                            </div>
                            <div>
                                <span class="content-right-text">{{ SummaryData.user_vip_count ?? 0 }}</span>
                                <span class="content-right-desc">VIP统计</span>
                            </div>
                        </div>

                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover">
                        <div class="content">
                            <div class="content-left">
                                <div style="width: 48px;height: 48px;color: #fff;">
                                    <Icon class="ba-upload-icon" name="el-icon-Briefcase" size="50" color="#6dd130" />
                                </div>
                            </div>
                            <div>
                                <span class="content-right-text">{{ SummaryData.user_sup_vip_count ?? 0 }}</span>
                                <span class="content-right-desc">全站VIP统计</span>
                            </div>
                        </div>

                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover">
                        <div class="content">
                            <div class="content-left">
                                <div style="width: 48px;height: 48px;color: #fff;">
                                    <Icon class="ba-upload-icon" name="el-icon-Briefcase" size="50" color="#ff84c0" />
                                </div>
                            </div>
                            <div>
                                <span class="content-right-text">{{ SummaryData.usre_day_insert_count ?? 0 }}</span>
                                <span class="content-right-desc">当天新增用户</span>
                            </div>
                        </div>

                    </el-card>
                </el-col>
         
            </el-row>
        </div> -->

        <!-- 表格顶部菜单 -->
        <TableHeader :buttons="['refresh', 'add', 'comSearch', 'quickSearch', 'columnDisplay']"
            quick-search-placeholder="根据分类名称模糊查询" />
        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table />
        <!-- 表单 -->
        <PopupForm />
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, provide, reactive } from 'vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { baTableApi } from '/@/api/common'
import PopupForm from './popupForm.vue'
import baTableClass from '/@/utils/baTable'
import { userStatistics } from '/@/api/backend/user/index'


defineOptions({
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'user/index',
})
const SummaryData = reactive({
    user_count: 0, //普通用户
    user_vip_count: 0, //vip统计
    user_sup_vip_count: 0, //全站vip
    usre_day_insert_count: 0, //当天用户新增统计

})
const tableRef = ref()
const baTable = new baTableClass(
    new baTableApi('/admin/v1/user/'),
    {
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: '用户编号', prop: 'label_id', align: 'center', operator: false },
            { label: '名称', prop: 'nickname', align: 'center', operator: 'LIKE', operatorPlaceholder: '请输入名称' },
            { label: '头像', prop: 'avatar', align: 'center', render: 'image', operator: false },
            { label: '手机号', prop: 'mobile', align: 'center', operator: 'LIKE', operatorPlaceholder: '请输入作者' },
            { label: '余额', prop: 'money', align: 'center', operator: false },
            { label: '积分', prop: 'score', align: 'center', operator: false },
            {
                label: '会员',
                prop: 'user_type',
                align: 'center',
                render: 'tag',
                custom: { '0': 'info', '1': 'success', '2': 'danger' },
                replaceValue: { '0': '普通用户', '1': 'VIP用户', '2': '全站VIP用户' },
            },

            { label: '会员到期时间', prop: 'expiration_time', align: 'center', operator: false },

            {
                label: '创建时间',
                prop: 'create_time',
                align: 'center',
                render: 'datetime',
                sortable: 'custom',
                operator: false,
            }
        ],
        dblClickNotEditColumn: ['all'],
    }
)


// //头部汇总统计
// const getUserInfo = (params: any) => {
//     userStatistics(params).then((res: any) => {
//         SummaryData.user_count = res.data.user_count //普通用户
//         SummaryData.user_vip_count = res.data.user_vip_count //vip统计
//         SummaryData.user_sup_vip_count = res.data.user_sup_vip_count //全站vip
//         SummaryData.usre_day_insert_count = res.data.usre_day_insert_count //当天用户新增统计
//     })
// }


provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.dragSort()
    })
})
</script>

<style scoped lang="scss">
.content {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px;
    background: #ffffff;

    .content-left {
        border-radius: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 60px;
        height: 60px;
        overflow: hidden;
        margin-right: 10px;
    }

    .content-right-text {
        display: block;
        color: #252631;
        font-size: 24px;
        line-height: 37px;
    }

    .content-right-desc {
        display: block;
        color: #98a9bc;
        font-size: 12px;
    }
}
</style>
